<template>
	<div class="block">
		<div class="demo-content">
			<!-- 插入组件 -->
			<slot name="demo"></slot>
		</div>
		<div class="meta" :style="{ height: `${metaHeight}px` }">
			<div class="description" ref="description">
				<!-- 插入描述信息 -->
				<slot name="description"></slot>
			</div>
			<div class="code-content" ref="codeContent">
				<!-- 插入代码块 -->
				<slot name="source"></slot>
			</div>
		</div>
		<div class="demo-block-control" @click="clicks">
			<span>显示代码</span>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue';
const description = ref(null);
const codeContent = ref(null);
const meta = ref(null);
const metaHeight = ref(0);
const clicks = () => {
	if (metaHeight.value > 0) {
		metaHeight.value = 0;
	} else {
		metaHeight.value = description.value?.clientHeight + codeContent.value?.clientHeight + 30;
	}
};
</script>

<style lang="scss">
.block {
	background: #ffffff;
	border: 1px solid #ebebeb;
	border-radius: 3px;
	transition: 0.2s;
	margin-bottom: 24px;
	.demo-content {
		padding: 24px;
	}
	&:hover {
		box-shadow:
			0 0 8px 0 rgba(232, 237, 250, 0.6),
			0 2px 4px 0 rgba(232, 237, 250, 0.5);
	}
	.meta {
		background-color: #fafafa;
		border-top: 1px solid #eaeefb;
		overflow: hidden;
		height: 0;
		transition: height 0.2s;
		.description {
			padding: 20px;
			box-sizing: border-box;
			border: 1px solid #ebebeb;
			border-radius: 3px;
			font-size: 14px;
			line-height: 22px;
			color: #666;
			word-break: break-word;
			margin: 10px;
			background-color: #fff;
		}
	}
	.demo-block-control {
		border-top: 1px solid #eaeefb;
		height: 44px;
		box-sizing: border-box;
		background-color: #fff;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		text-align: center;
		margin-top: -1px;
		color: #d3dce6;
		cursor: pointer;
		position: relative;
		line-height: 44px;
		&:hover {
			color: #409eff;
			background-color: #f9fafc;
		}
	}
}
html.dark .block {
	background: var(--c-bg);
	border-color: #4c4d4f;
	&:hover {
		box-shadow: none;
	}
	.meta {
		background: var(--code-bg-color);
		border-color: #4c4d4f;
		.description {
			background: var(--code-bg-color);
			color: var(--c-text);
			border-color: #4c4d4f;
		}
	}
	.demo-block-control {
		background: var(--c-bg);
		color: var(--c-text);
		border-color: #4c4d4f;
		&:hover {
			color: var(--c-text-accent);
			background-color: #4c4d4f;
		}
	}
}
</style>
